<!-- 
    img[src=./imgs/$.jpg]*8 

    发现问题：打开网页，立马加载所有图片，意味着立马去服务器下载所有js、css、img不好
    用户体验度差  用户需要等待更多的时间网页才会运行完毕

    解决： 图片懒加载 
    说明： 默认仅加载当前屏幕的图片，当用户向下滚动存的时候加载更多图片


    多学一招：
    浏览器潜规则：同一个图片或者js或者css等等静态资源 第一次去服务器获取，然后缓存到本地，第二次直接本地获取
    多学二招
    当img的src改成真是的地址 浏览器会悄悄的再次去服务器拿最新的数据
    
    分析：
    1-src改成同一个图片  loading （参考京东
    2-真是的图片地址翻到 src-real属性上


    css的高度都必须写单位
    标签的高度可以不写 默认px   img、iframe等标签有宽度高度 其他没有
-->
<img src="https://kg.zhaodashen.cn/web/images/loading4.gif" height="350" src-real="./imgs/1.jpg" alt=""><br/>
<img src="https://kg.zhaodashen.cn/web/images/loading4.gif" height="350" src-real="./imgs/2.jpg" alt=""><br/>
<img src="https://kg.zhaodashen.cn/web/images/loading4.gif" height="350" src-real="./imgs/3.jpg" alt=""><br/>
<img src="https://kg.zhaodashen.cn/web/images/loading4.gif" height="350" src-real="./imgs/4.jpg" alt=""><br/>
<img src="https://kg.zhaodashen.cn/web/images/loading4.gif" height="350" src-real="./imgs/5.jpg" alt=""><br/>
<img src="https://kg.zhaodashen.cn/web/images/loading4.gif" height="350" src-real="./imgs/6.jpg" alt=""><br/>
<img src="https://kg.zhaodashen.cn/web/images/loading4.gif" height="350" src-real="./imgs/7.jpg" alt=""><br/>
<img src="https://kg.zhaodashen.cn/web/images/loading4.gif" height="350" src-real="./imgs/8.jpg" alt="">
<script src="./图片懒加载.js"></script>
<script>


// 首次：首次需要改图片真是地址
lazyload() 

// 后续：后期滚动也要改图片真水地址
// window.onscroll = lazyload()  错误 undefined
// window.onscroll = lazyload  //  函数本身
let t = null
window.onscroll = function() {
    clearTimeout(t)
    t=setTimeout(() => {
        lazyload()
    }, 1000)
}  
</script> 